<template>
  <div class="banner-management">
    <el-card class="banner-management-card">
      <!-- 页面头部 -->
      <div class="header-content">
        <h1 class="page-title">
          <el-icon><Picture /></el-icon>
          Banner广告位管理
        </h1>
        <p class="page-desc">管理手机APP Banner广告位，支持图片上传、链接配置和移动端预览效果</p>
      </div>

      <!-- 筛选条件 -->
      <el-form :model="searchForm" inline class="search-form">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="广告标题">
              <el-input
                v-model="searchForm.title"
                placeholder="请输入广告标题"
                clearable
                prefix-icon="Search"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="广告位置">
              <el-select v-model="searchForm.position" placeholder="请选择位置" clearable style="width: 140px">
                <el-option label="全部" value="" />
                <el-option label="APP首页轮播" value="app_home_banner" />
                <el-option label="APP启动页" value="app_splash" />
                <el-option label="分类页顶部" value="app_category_top" />
                <el-option label="商品列表插屏" value="app_product_interstitial" />
                <el-option label="个人中心" value="app_profile_banner" />
                <el-option label="首页帮助中心" value="app_home_help" />
                <el-option label="首页入口配置" value="app_home_entry" />

                <el-option label="首页公告位" value="app_home_announcement" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
                <el-option label="全部" value="" />
                <el-option label="已发布" value="published" />
                <el-option label="草稿" value="draft" />
                <el-option label="已下线" value="offline" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="handleReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 操作工具栏 -->
      <div class="table-toolbar">
        <div class="toolbar-left">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新建广告
          </el-button>
          <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
          <el-button type="success" @click="handleCompletePreview">
            <el-icon><View /></el-icon>
            完整预览
          </el-button>
        </div>
        <div class="toolbar-right">
          <span class="selected-info">已选择 {{ selectedRows.length }} 项</span>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <el-table
          :data="filteredBanners"
          border
          stripe
          @selection-change="handleSelectionChange"
          v-loading="loading"
          height="100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
          <el-table-column prop="position" label="广告位置" width="120">
            <template #default="scope">
              <el-tag :type="getPositionTagType(scope.row.position)" size="small">
                {{ positionMap[scope.row.position] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="image" label="广告图片" width="120">
            <template #default="scope">
              <div class="banner-image-container">
                <img 
                  v-if="scope.row.image && (scope.row.image.startsWith('data:') || scope.row.image.startsWith('http'))" 
                  :src="scope.row.image" 
                  alt="banner"
                  style="width: 80px; height: 45px; object-fit: cover; border-radius: 4px;"
                />
                <div v-else class="banner-placeholder">
                  <span class="placeholder-text">{{ getIconFromImage(scope.row.image) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="link" label="跳转链接" min-width="200" show-overflow-tooltip />
          <el-table-column prop="sort" label="排序" width="80" align="center" />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" size="small">
                {{ statusMap[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="160" />
          <el-table-column label="操作" width="280" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="info" @click="handlePreview(scope.row)">预览</el-button>
                <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                  v-if="scope.row.status !== 'published'"
                  size="small"
                  type="success"
                  @click="handlePublish(scope.row)"
                >
                  发布
                </el-button>
                <el-button
                  v-else
                  size="small"
                  type="warning"
                  @click="handleOffline(scope.row)"
                >
                  下线
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredBanners.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新建/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑广告' : '新建广告'"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" @input="updatePreview">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="广告标题" prop="title" required>
              <el-input v-model="form.title" placeholder="请输入广告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="广告位置" prop="position" required>
              <el-select v-model="form.position" placeholder="请选择广告位置" style="width: 100%" @change="handlePositionChange">
                <el-option label="APP首页轮播" value="app_home_banner" />
                <el-option label="APP启动页" value="app_splash" />
                <el-option label="分类页顶部" value="app_category_top" />
                <el-option label="商品列表插屏" value="app_product_interstitial" />
                <el-option label="个人中心" value="app_profile_banner" />
                <el-option label="首页帮助中心" value="app_home_help" />
                <el-option label="首页入口配置" value="app_home_entry" />

                <el-option label="首页公告位" value="app_home_announcement" />
              </el-select>
              <div class="position-info" v-if="form.position">
                <el-text size="small" type="info">{{ getPositionPublishInfo(form.position) }}</el-text>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="跳转链接" prop="link">
              <el-input v-model="form.link" placeholder="请输入跳转链接" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :min="0" :max="999" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 网格配置（仅首页入口配置位置显示） -->
        <el-row v-if="form.position === 'app_home_entry'" :gutter="16">
          <el-col :span="24">
            <el-alert
              v-if="getGridConfigHint()"
              :title="getGridConfigHint()"
              type="info"
              :closable="false"
              style="margin-bottom: 16px;"
            />
          </el-col>
          <el-col :span="12">
            <el-form-item label="网格行数" prop="gridRows">
              <el-select v-model="form.gridRows" style="width: 100%">
                <el-option label="1行" :value="1" />
                <el-option label="2行" :value="2" />
                <el-option label="3行" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网格列数" prop="gridCols">
              <el-select v-model="form.gridCols" style="width: 100%">
                <el-option label="3列" :value="3" />
                <el-option label="4列" :value="4" />
                <el-option label="5列" :value="5" />
                <el-option label="6列" :value="6" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="广告图片" prop="image" required>
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :show-file-list="false"
              :on-success="handleImageSuccess"
              :before-upload="beforeImageUpload"
              action="#"
              :http-request="uploadImage"
            >
              <img v-if="form.image" :src="form.image" class="uploaded-image" />
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tips">
              <p>支持 jpg、png、webp 格式</p>
              <p>APP首页轮播：750x300px | APP启动页：750x1334px</p>
              <p>分类页顶部：750x200px | 插屏广告：600x800px | 个人中心：750x150px</p>
              <p>首页帮助中心：750x200px | 首页入口配置：750x300px</p>
              <p>文件大小不超过10MB，建议使用高质量图片以确保显示效果</p>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="广告描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请输入广告描述"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="openPreview">预览效果</el-button>
          <el-button @click="handleSaveDraft">保存草稿</el-button>
          <el-button type="primary" @click="handleSubmit">
            {{ isEdit ? '更新' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 手机APP预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="手机APP预览效果"
      width="450px"
      :close-on-click-modal="true"
      center
    >
      <div class="mobile-preview-container">
        <div class="mobile-frame">
          <!-- 手机状态栏 -->
          <div class="mobile-status-bar">
            <span class="status-time">9:41</span>
            <div class="status-icons">
              <span class="signal">●●●</span>
              <span class="wifi">📶</span>
              <span class="battery">🔋100%</span>
            </div>
          </div>

          <!-- 根据广告位置显示不同预览 -->
          <div class="mobile-content">
            <!-- APP首页轮播 -->
            <div v-if="previewType === 'app_home_banner'" class="app-home-preview">
              <div class="app-header">
                <div class="app-title">我的应用</div>
                <div class="app-search">🔍</div>
              </div>
              <div class="home-banner">
                <div class="carousel-wrapper">
                  <div
                    v-for="(banner, index) in carouselBanners"
                    :key="banner.id || index"
                    class="carousel-slide"
                    :class="{ active: index === currentCarouselIndex }"
                  >
                    <img
                      :src="banner.image || 'https://dummyimage.com/750x300/409EFF/fff&text=首页轮播'"
                      :alt="banner.title || '首页轮播'"
                    />
                    <div class="banner-overlay" v-if="banner.title">
                      <h4 class="banner-title">{{ banner.title }}</h4>
                      <p class="banner-desc" v-if="banner.description">{{ banner.description }}</p>
                    </div>
                  </div>
                </div>
                <div class="banner-indicators" v-if="carouselBanners.length > 1">
                  <span
                    v-for="(banner, index) in carouselBanners"
                    :key="index"
                    class="dot"
                    :class="{ active: index === currentCarouselIndex }"
                    @click="goToSlide(index)"
                  ></span>
                </div>
                <div class="carousel-info">
                  <span class="carousel-count">{{ currentCarouselIndex + 1 }} / {{ carouselBanners.length }}</span>
                </div>
              </div>
              <div class="home-content">
                <div class="section-title">热门推荐</div>
                <div class="product-grid">
                  <div class="product-item">商品1</div>
                  <div class="product-item">商品2</div>
                </div>
              </div>
            </div>

            <!-- APP启动页 -->
            <div v-else-if="previewType === 'app_splash'" class="app-splash-preview">
              <div class="splash-content">
                <!-- 启动页背景图片 -->
                <img :src="currentPreview.image || 'https://dummyimage.com/750x1334/67C23A/fff&text=启动页广告'" alt="启动页" />
                
                <!-- 顶部状态栏 -->
                <div class="splash-status-bar">
                  <span class="status-time">9:41</span>
                  <div class="status-icons">
                    <span class="signal">●●●</span>
                    <span class="wifi">📶</span>
                    <span class="battery">🔋100%</span>
                  </div>
                </div>
                
                <!-- 跳过按钮 -->
                <div class="splash-skip">
                  <span class="skip-text">跳过</span>
                  <span class="skip-countdown">{{ splashCountdown }}s</span>
                </div>
                
                <!-- 底部品牌信息 -->
                <div class="splash-brand">
                  <div class="brand-logo">🏪</div>
                  <div class="brand-name">我的应用</div>
                  <div class="brand-slogan">让购物更简单</div>
                </div>
                
                <!-- 加载指示器 -->
                <div class="splash-loading">
                  <div class="loading-dots">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                  </div>
                  <div class="loading-text">正在加载...</div>
                </div>
              </div>
            </div>

            <!-- 分类页顶部 -->
            <div v-else-if="previewType === 'app_category_top'" class="app-category-preview">
              <div class="app-header">
                <div class="back-btn">←</div>
                <div class="app-title">商品分类</div>
                <div class="app-search">🔍</div>
              </div>
              <div class="category-banner">
                <img :src="currentPreview.image || 'https://dummyimage.com/750x200/E6A23C/fff&text=分类页广告'" alt="分类页广告" />
              </div>
              <div class="category-content">
                <div class="category-tabs">
                  <div class="tab active">数码</div>
                  <div class="tab">服装</div>
                  <div class="tab">家居</div>
                </div>
                <div class="category-list">
                  <div class="category-item">手机</div>
                  <div class="category-item">电脑</div>
                </div>
              </div>
            </div>

            <!-- 商品列表插屏 -->
            <div v-else-if="previewType === 'app_product_interstitial'" class="app-interstitial-preview">
              <div class="interstitial-overlay">
                <div class="interstitial-modal">
                  <div class="modal-close">×</div>
                  <img :src="currentPreview.image || 'https://dummyimage.com/600x800/F56C6C/fff&text=插屏广告'" alt="插屏广告" />
                </div>
              </div>
              <div class="background-content">
                <div class="app-header">
                  <div class="back-btn">←</div>
                  <div class="app-title">商品列表</div>
                </div>
                <div class="product-list">
                  <div class="list-item">商品A</div>
                  <div class="list-item">商品B</div>
                </div>
              </div>
            </div>

            <!-- 个人中心 -->
            <div v-else-if="previewType === 'app_profile_banner'" class="app-profile-preview">
              <div class="app-header">
                <div class="app-title">个人中心</div>
                <div class="settings-btn">⚙️</div>
              </div>
              <div class="profile-info">
                <div class="avatar">👤</div>
                <div class="user-name">用户昵称</div>
              </div>
              <div class="profile-banner">
                <img :src="currentPreview.image || 'https://dummyimage.com/750x150/9C27B0/fff&text=个人中心广告'" alt="个人中心广告" />
              </div>
              <div class="profile-menu">
                <div class="menu-item">我的订单</div>
                <div class="menu-item">我的收藏</div>
                <div class="menu-item">设置</div>
              </div>
            </div>

            <!-- 完整APP首页预览 -->
            <div v-else-if="previewType === 'app_home_complete'" class="app-home-complete-preview">
              <!-- APP启动页（如果有启动页广告且倒计时未结束） -->
              <div v-if="publishedSplashAd && splashCountdown > 0" class="splash-section">
                <div class="splash-content">
                  <!-- 启动页背景图片 -->
                  <img :src="publishedSplashAd.image || 'https://dummyimage.com/750x1334/67C23A/fff&text=启动页广告'" alt="启动页" />
                  
                  <!-- 顶部状态栏 -->
                  <div class="splash-status-bar">
                    <span class="status-time">9:41</span>
                    <div class="status-icons">
                      <span class="signal">●●●</span>
                      <span class="wifi">📶</span>
                      <span class="battery">🔋100%</span>
                    </div>
                  </div>
                  
                  <!-- 跳过按钮 -->
                  <div class="splash-skip" @click="skipSplash">
                    <span class="skip-text">跳过</span>
                    <span class="skip-countdown">{{ splashCountdown }}s</span>
                  </div>
                  
                  <!-- 底部品牌信息 -->
                  <div class="splash-brand">
                    <div class="brand-logo">🏪</div>
                    <div class="brand-name">我的应用</div>
                    <div class="brand-slogan">让购物更简单</div>
                  </div>
                  
                  <!-- 加载指示器 -->
                  <div class="splash-loading">
                    <div class="loading-dots">
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                    </div>
                    <div class="loading-text">正在加载...</div>
                  </div>
                </div>
              </div>

                            <!-- APP首页内容（倒计时结束后显示） -->
              <div v-else class="app-home-content">
                <!-- APP头部 -->
                <div class="app-header">
                  <div class="app-title">我的应用</div>
                  <div class="app-search">🔍</div>
                </div>
                
                <!-- 首页轮播广告 -->
                <div class="home-banner">
                  <div class="carousel-wrapper">
                    <div
                      v-for="(banner, index) in homeBanners"
                      :key="banner.id || index"
                      class="carousel-slide"
                      :class="{ active: index === currentCarouselIndex }"
                    >
                      <img
                        :src="banner.image || 'https://dummyimage.com/750x300/409EFF/fff&text=首页轮播'"
                        :alt="banner.title || '首页轮播'"
                      />
                      <div class="banner-overlay" v-if="banner.title">
                        <h4 class="banner-title">{{ banner.title }}</h4>
                        <p class="banner-desc" v-if="banner.description">{{ banner.description }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="banner-indicators" v-if="homeBanners.length > 1">
                    <span
                      v-for="(banner, index) in homeBanners"
                      :key="index"
                      class="dot"
                      :class="{ active: index === currentCarouselIndex }"
                      @click="goToSlide(index)"
                    ></span>
                  </div>
                  <div class="carousel-info">
                    <span class="carousel-count">{{ currentCarouselIndex + 1 }} / {{ homeBanners.length }}</span>
                  </div>
                </div>

                <!-- 帮助中心导航栏 -->
                <div class="help-nav-bar">
                  <div 
                    v-for="(ad, index) in publishedHelpCenterAds" 
                    :key="ad.id"
                    class="nav-link"
                    :style="{ width: `${100 / publishedHelpCenterAds.length}%` }"
                  >
                    <div class="nav-icon">
                      <img 
                        v-if="ad.image && (ad.image.startsWith('data:') || ad.image.startsWith('http'))" 
                        :src="ad.image" 
                        alt="icon"
                        style="width: 16px; height: 16px; object-fit: cover;"
                      />
                      <span v-else>{{ getIconFromImage(ad.image) }}</span>
                    </div>
                    <span class="nav-text">{{ ad.title }}</span>
                    <span class="nav-arrow">></span>
                  </div>
                </div>

                <!-- 公告区域 -->
                <div class="announcement-bar" v-if="publishedAnnouncementAds.length > 0">
                  <div class="announcement-carousel">
                    <div class="announcement-text-container">
                      <span class="announcement-text">公告 | {{ publishedAnnouncementAds[currentAnnouncementIndex]?.title || '' }}</span>
                    </div>
                  </div>
                </div>

                <!-- 应用图标区域（动态网格） -->
                <div class="app-icons" :style="{ 
                  'grid-template-columns': `repeat(${getGridConfig().cols}, 1fr)`,
                  'grid-template-rows': `repeat(${getGridConfig().rows}, 1fr)`
                }">
                  <div 
                    v-for="(ad, index) in publishedHomeEntryAds" 
                    :key="ad.id"
                    class="app-icon"
                  >
                    <div class="icon-logo">
                      <img 
                        v-if="ad.image && (ad.image.startsWith('data:') || ad.image.startsWith('http'))" 
                        :src="ad.image" 
                        alt="icon"
                        style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;"
                      />
                      <span v-else>{{ getIconFromImage(ad.image) }}</span>
                    </div>
                    <div class="icon-text">{{ ad.title }}</div>
                  </div>
                </div>



                <!-- 首页内容区域 -->
                <div class="home-content">
                  <div class="section-title">热门推荐</div>
                  <div class="product-grid">
                    <div class="product-item">商品1</div>
                    <div class="product-item">商品2</div>
                    <div class="product-item">商品3</div>
                    <div class="product-item">商品4</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 首页帮助中心配置预览 -->
            <div v-else-if="previewType === 'app_home_help'" class="app-home-help-preview">
              <!-- 帮助中心导航栏 -->
              <div class="help-nav-bar">
                <div 
                  v-for="(ad, index) in publishedHelpCenterAds" 
                  :key="ad.id"
                  class="nav-link"
                  :class="{ active: ad.id === currentPreview.id }"
                  :style="{ width: `${100 / publishedHelpCenterAds.length}%` }"
                >
                  <div class="nav-icon">
                    <img 
                      v-if="ad.image && (ad.image.startsWith('data:') || ad.image.startsWith('http'))" 
                      :src="ad.image" 
                      alt="icon"
                      style="width: 16px; height: 16px; object-fit: cover;"
                    />
                    <span v-else>{{ getIconFromImage(ad.image) }}</span>
                  </div>
                  <span class="nav-text">{{ ad.title }}</span>
                  <span class="nav-arrow">></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="closePreview">关闭预览</el-button>
        <el-button
          v-if="previewType === 'app_home_banner' && carouselBanners.length > 1"
          type="primary"
          @click="toggleAutoPlay"
        >
          {{ isAutoPlaying ? '暂停轮播' : '开始轮播' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Picture, Search, Refresh, Plus, Delete, View } from '@element-plus/icons-vue'

// 接口定义
interface Banner {
  id: number
  title: string
  image: string
  link: string
  position: string
  sort: number
  status: string
  description?: string
  createdAt: string
  updatedAt: string
  clickCount?: number
  viewCount?: number
  gridRows?: number // 网格行数
  gridCols?: number // 网格列数
}

// 响应式数据
const loading = ref(false)
const dialogVisible = ref(false)
const previewVisible = ref(false)
const isEdit = ref(false)
const selectedRows = ref<Banner[]>([])
const previewType = ref('home_carousel')
const currentPreview = ref<Banner>({} as Banner)
const splashCountdown = ref(3)

// 搜索表单
const searchForm = reactive({
  title: '',
  position: '',
  status: ''
})

// 表单数据
const form = ref({
  id: -1,
  title: '',
  image: '',
  link: '',
  position: 'app_home_banner',
  sort: 0,
  status: 'draft',
  description: '',
  gridRows: 1,
  gridCols: 5
})

// 分页
const pagination = reactive({
  current: 1,
  size: 10
})

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }],
  position: [{ required: true, message: '请选择广告位置', trigger: 'change' }],
  image: [{ required: true, message: '请上传广告图片', trigger: 'change' }]
}

// 映射对象
const positionMap: { [key: string]: string } = {
  app_home_banner: 'APP首页轮播',
  app_splash: 'APP启动页',
  app_category_top: '分类页顶部',
  app_product_interstitial: '商品列表插屏',
  app_profile_banner: '个人中心',
  app_home_help: '首页帮助中心',
  app_home_entry: '首页入口配置',

  app_home_announcement: '首页公告位'
}

const statusMap: { [key: string]: string } = {
  published: '已发布',
  draft: '草稿',
  offline: '已下线'
}

// 广告位发布数量限制配置
const positionLimits: { [key: string]: number } = {
  app_home_banner: -1, // -1表示无限制（轮播广告）
  app_splash: -1,       // 启动页只能有1个发布
  app_category_top: 1, // 分类页顶部只能有1个发布
  app_product_interstitial: 1, // 插屏广告只能有1个发布
  app_profile_banner: 1, // 个人中心只能有1个发布
  app_home_help: 5, // 首页帮助中心最多支持5个同时发布
  app_home_entry: 10, // 首页入口配置支持多个发布（网格广告）

  app_home_announcement: -1 // 首页公告位不限制数量（轮播显示）
}

// Mock数据
const banners = ref<Banner[]>([
  // APP首页轮播广告 (5个) - 轮播广告可以多个同时发布
  {
    id: 1,
    title: '夏季大促销活动',
    image: '',
    link: 'app://promotion/summer',
    position: 'app_home_banner',
    sort: 1,
    status: 'published',
    description: '夏季大促销，全场商品5折起，限时优惠不容错过！',
    createdAt: '2024-07-20 10:00:00',
    updatedAt: '2024-07-20 10:00:00',
    clickCount: 1250,
    viewCount: 5680
  },
  {
    id: 2,
    title: '新品上市推广',
    image: 'https://dummyimage.com/750x300/67C23A/fff&text=新品上市',
    link: 'app://products/new',
    position: 'app_home_banner',
    sort: 2,
    status: 'published',
    description: '最新产品震撼上市，科技与美学的完美结合',
    createdAt: '2024-07-19 15:30:00',
    updatedAt: '2024-07-19 15:30:00',
    clickCount: 890,
    viewCount: 3420
  },
  {
    id: 3,
    title: '双11预热活动',
    image: 'https://dummyimage.com/750x300/E6A23C/fff&text=双11预热',
    link: 'app://promotion/double11',
    position: 'app_home_banner',
    sort: 3,
    status: 'published',
    description: '双11预热开始，提前锁定心仪商品',
    createdAt: '2024-07-18 14:20:00',
    updatedAt: '2024-07-18 14:20:00',
    clickCount: 756,
    viewCount: 2890
  },
  {
    id: 4,
    title: '品牌联合促销',
    image: 'https://dummyimage.com/750x300/F56C6C/fff&text=品牌联合',
    link: 'app://brands/alliance',
    position: 'app_home_banner',
    sort: 4,
    status: 'draft',
    description: '多品牌联合促销，超值优惠等你来抢',
    createdAt: '2024-07-17 11:15:00',
    updatedAt: '2024-07-17 11:15:00'
  },
  {
    id: 5,
    title: '会员专享日',
    image: 'https://dummyimage.com/750x300/9C27B0/fff&text=会员专享',
    link: 'app://member/exclusive',
    position: 'app_home_banner',
    sort: 5,
    status: 'offline',
    description: '会员专享日，尊享特别优惠和服务',
    createdAt: '2024-07-16 09:30:00',
    updatedAt: '2024-07-16 09:30:00',
    clickCount: 445,
    viewCount: 1789
  },

  // APP启动页广告 (3个) - 只能有1个发布
  {
    id: 6,
    title: '品牌形象展示',
    image: 'https://dummyimage.com/750x1334/FF5722/fff&text=品牌形象',
    link: 'app://brands/image',
    position: 'app_splash',
    sort: 1,
    status: 'published',
    description: '品牌形象展示，传递品牌价值理念',
    createdAt: '2024-07-20 08:00:00',
    updatedAt: '2024-07-20 08:00:00',
    clickCount: 2340,
    viewCount: 15680
  },
  {
    id: 7,
    title: '新版本功能介绍',
    image: 'https://dummyimage.com/750x1334/795548/fff&text=新版本',
    link: 'app://update/features',
    position: 'app_splash',
    sort: 2,
    status: 'offline',
    description: 'APP新版本重磅功能，提升用户体验',
    createdAt: '2024-07-19 10:30:00',
    updatedAt: '2024-07-19 10:30:00',
    clickCount: 1890,
    viewCount: 12450
  },
  {
    id: 8,
    title: '节日祝福广告',
    image: 'https://dummyimage.com/750x1334/607D8B/fff&text=节日祝福',
    link: 'app://festival/greeting',
    position: 'app_splash',
    sort: 3,
    status: 'draft',
    description: '节日祝福，传递温暖关怀',
    createdAt: '2024-07-18 16:20:00',
    updatedAt: '2024-07-18 16:20:00'
  },

  // 分类页顶部广告 (4个) - 只能有1个发布
  {
    id: 9,
    title: '数码产品专区',
    image: 'https://dummyimage.com/750x200/3F51B5/fff&text=数码专区',
    link: 'app://category/digital',
    position: 'app_category_top',
    sort: 1,
    status: 'published',
    description: '数码产品专区，最新科技产品推荐',
    createdAt: '2024-07-20 14:00:00',
    updatedAt: '2024-07-20 14:00:00',
    clickCount: 567,
    viewCount: 2340
  },
  {
    id: 10,
    title: '服装时尚专场',
    image: 'https://dummyimage.com/750x200/E91E63/fff&text=服装时尚',
    link: 'app://category/fashion',
    position: 'app_category_top',
    sort: 2,
    status: 'offline',
    description: '时尚服装专场，潮流单品一网打尽',
    createdAt: '2024-07-19 13:45:00',
    updatedAt: '2024-07-19 13:45:00',
    clickCount: 789,
    viewCount: 3210
  },
  {
    id: 11,
    title: '家居生活馆',
    image: 'https://dummyimage.com/750x200/4CAF50/fff&text=家居生活',
    link: 'app://category/home',
    position: 'app_category_top',
    sort: 3,
    status: 'offline',
    description: '家居生活馆，打造温馨舒适的家',
    createdAt: '2024-07-18 11:20:00',
    updatedAt: '2024-07-18 11:20:00',
    clickCount: 432,
    viewCount: 1876
  },
  {
    id: 12,
    title: '美食特产节',
    image: 'https://dummyimage.com/750x200/FF9800/fff&text=美食特产',
    link: 'app://category/food',
    position: 'app_category_top',
    sort: 4,
    status: 'draft',
    description: '美食特产节，品味地道美食文化',
    createdAt: '2024-07-17 15:30:00',
    updatedAt: '2024-07-17 15:30:00'
  },

  // 商品列表插屏广告 (3个) - 只能有1个发布
  {
    id: 13,
    title: '限时抢购活动',
    image: 'https://dummyimage.com/600x800/F44336/fff&text=限时抢购',
    link: 'app://flash-sale',
    position: 'app_product_interstitial',
    sort: 1,
    status: 'published',
    description: '限时抢购活动，错过再等一年',
    createdAt: '2024-07-20 12:00:00',
    updatedAt: '2024-07-20 12:00:00',
    clickCount: 1234,
    viewCount: 8765
  },
  {
    id: 14,
    title: '新用户专享礼包',
    image: 'https://dummyimage.com/600x800/2196F3/fff&text=新用户礼包',
    link: 'app://newuser/gift',
    position: 'app_product_interstitial',
    sort: 2,
    status: 'offline',
    description: '新用户专享礼包，注册即送豪礼',
    createdAt: '2024-07-19 09:15:00',
    updatedAt: '2024-07-19 09:15:00',
    clickCount: 987,
    viewCount: 6543
  },
  {
    id: 15,
    title: '积分兑换专区',
    image: 'https://dummyimage.com/600x800/9E9E9E/fff&text=积分兑换',
    link: 'app://points/exchange',
    position: 'app_product_interstitial',
    sort: 3,
    status: 'draft',
    description: '积分兑换专区，积分当钱花',
    createdAt: '2024-07-18 14:45:00',
    updatedAt: '2024-07-18 14:45:00'
  },

  // 个人中心广告 (4个) - 只能有1个发布
  {
    id: 16,
    title: '会员升级福利',
    image: 'https://dummyimage.com/750x150/673AB7/fff&text=会员升级',
    link: 'app://member/upgrade',
    position: 'app_profile_banner',
    sort: 1,
    status: 'published',
    description: '升级会员享受更多特权和优惠',
    createdAt: '2024-07-20 16:30:00',
    updatedAt: '2024-07-20 16:30:00',
    clickCount: 345,
    viewCount: 1567
  },
  {
    id: 17,
    title: '邀请好友有礼',
    image: 'https://dummyimage.com/750x150/00BCD4/fff&text=邀请好友',
    link: 'app://invite/friends',
    position: 'app_profile_banner',
    sort: 2,
    status: 'offline',
    description: '邀请好友注册，双方都有奖励',
    createdAt: '2024-07-19 11:20:00',
    updatedAt: '2024-07-19 11:20:00',
    clickCount: 278,
    viewCount: 1234
  },
  {
    id: 18,
    title: '个人理财服务',
    image: 'https://dummyimage.com/750x150/8BC34A/fff&text=理财服务',
    link: 'app://finance/service',
    position: 'app_profile_banner',
    sort: 3,
    status: 'offline',
    description: '专业理财服务，让财富增值',
    createdAt: '2024-07-18 13:10:00',
    updatedAt: '2024-07-18 13:10:00',
    clickCount: 156,
    viewCount: 789
  },
  {
    id: 19,
    title: '客服支持中心',
    image: 'https://dummyimage.com/750x150/CDDC39/fff&text=客服支持',
    link: 'app://support/center',
    position: 'app_profile_banner',
    sort: 4,
    status: 'draft',
    description: '24小时客服支持，随时为您服务',
    createdAt: '2024-07-17 10:45:00',
    updatedAt: '2024-07-17 10:45:00'
  },

  // 首页帮助中心广告 (5个) - 最多支持5个同时发布
  {
    id: 20,
    title: '使用说明',
    image: '',
    link: 'app://help/instructions',
    position: 'app_home_help',
    sort: 1,
    status: 'published',
    description: '使用说明入口，提供用户操作指南',
    createdAt: '2024-07-20 18:00:00',
    updatedAt: '2024-07-20 18:00:00',
    clickCount: 234,
    viewCount: 1234
  },
  {
    id: 21,
    title: '国际物流',
    image: 'https://dummyimage.com/40x40/2196F3/fff&text=✈️',
    link: 'app://logistics/international',
    position: 'app_home_help',
    sort: 2,
    status: 'published',
    description: '国际物流入口，查询物流信息',
    createdAt: '2024-07-19 16:30:00',
    updatedAt: '2024-07-19 16:30:00',
    clickCount: 156,
    viewCount: 890
  },
  {
    id: 25,
    title: '费用构成',
    image: 'https://dummyimage.com/40x40/4CAF50/fff&text=💰',
    link: 'app://help/fees',
    position: 'app_home_help',
    sort: 3,
    status: 'published',
    description: '费用构成说明，了解各项费用明细',
    createdAt: '2024-07-18 14:20:00',
    updatedAt: '2024-07-18 14:20:00',
    clickCount: 189,
    viewCount: 1023
  },
  {
    id: 26,
    title: '运费计算',
    image: 'https://dummyimage.com/40x40/9C27B0/fff&text=🧮',
    link: 'app://help/shipping',
    position: 'app_home_help',
    sort: 4,
    status: 'published',
    description: '运费计算器，快速计算运输费用',
    createdAt: '2024-07-17 11:15:00',
    updatedAt: '2024-07-17 11:15:00',
    clickCount: 267,
    viewCount: 1456
  },
  {
    id: 27,
    title: '客服咨询',
    image: 'https://dummyimage.com/40x40/FF5722/fff&text=💬',
    link: 'app://help/service',
    position: 'app_home_help',
    sort: 5,
    status: 'published',
    description: '在线客服咨询，解答各类问题',
    createdAt: '2024-07-16 09:30:00',
    updatedAt: '2024-07-16 09:30:00',
    clickCount: 345,
    viewCount: 1789
  },

  // 首页入口配置广告 (5个) - 网格广告，支持多个同时发布
  {
    id: 22,
    title: '煤炉',
    image: '',
    link: 'app://platform/mercari',
    position: 'app_home_entry',
    sort: 1,
    status: 'published',
    description: '煤炉平台入口',
    gridRows: 1,
    gridCols: 5,
    createdAt: '2024-07-20 19:00:00',
    updatedAt: '2024-07-20 19:00:00',
    clickCount: 567,
    viewCount: 2345
  },
  {
    id: 23,
    title: '雅虎日拍',
    image: 'https://dummyimage.com/40x40/2196F3/fff&text=雅',
    link: 'app://platform/yahoo',
    position: 'app_home_entry',
    sort: 2,
    status: 'published',
    description: '雅虎日拍平台入口',
    gridRows: 1,
    gridCols: 5,
    createdAt: '2024-07-19 17:45:00',
    updatedAt: '2024-07-19 17:45:00',
    clickCount: 345,
    viewCount: 1567
  },
  {
    id: 24,
    title: '骏河屋',
    image: 'https://dummyimage.com/40x40/4CAF50/fff&text=骏',
    link: 'app://platform/suruga',
    position: 'app_home_entry',
    sort: 3,
    status: 'published',
    description: '骏河屋平台入口',
    gridRows: 1,
    gridCols: 5,
    createdAt: '2024-07-18 14:20:00',
    updatedAt: '2024-07-18 14:20:00',
    clickCount: 234,
    viewCount: 1234
  },
  {
    id: 28,
    title: '乐天',
    image: 'https://dummyimage.com/40x40/9C27B0/fff&text=乐',
    link: 'app://platform/rakuten',
    position: 'app_home_entry',
    sort: 4,
    status: 'published',
    description: '乐天平台入口',
    gridRows: 1,
    gridCols: 5,
    createdAt: '2024-07-17 11:15:00',
    updatedAt: '2024-07-17 11:15:00',
    clickCount: 456,
    viewCount: 1890
  },
  {
    id: 29,
    title: '亚马逊',
    image: 'https://dummyimage.com/40x40/FF5722/fff&text=亚',
    link: 'app://platform/amazon',
    position: 'app_home_entry',
    sort: 5,
    status: 'published',
    description: '亚马逊平台入口',
    gridRows: 1,
    gridCols: 5,
    createdAt: '2024-07-16 09:30:00',
    updatedAt: '2024-07-16 09:30:00',
    clickCount: 678,
    viewCount: 2567
  },

  // 领券中心广告 (1个) - 只能有1个发布


  // 首页公告位广告 (3个) - 不限制数量，轮播显示
  {
    id: 31,
    title: '关于手续费调整的通知',
    image: '', // 公告位不需要图片
    link: 'app://announcement/fee-adjustment',
    position: 'app_home_announcement',
    sort: 1,
    status: 'published',
    description: '关于手续费调整的重要通知',
    createdAt: '2024-07-20 10:00:00',
    updatedAt: '2024-07-20 10:00:00',
    clickCount: 123,
    viewCount: 567
  },
  {
    id: 31,
    title: '系统维护通知',
    image: '', // 公告位不需要图片
    link: 'app://announcement/system-maintenance',
    position: 'app_home_announcement',
    sort: 2,
    status: 'published',
    description: '系统将于今晚进行维护升级',
    createdAt: '2024-07-19 15:30:00',
    updatedAt: '2024-07-19 15:30:00',
    clickCount: 89,
    viewCount: 234
  },
  {
    id: 32,
    title: '新功能上线公告',
    image: '', // 公告位不需要图片
    link: 'app://announcement/new-features',
    position: 'app_home_announcement',
    sort: 3,
    status: 'published',
    description: '新功能已上线，欢迎体验',
    createdAt: '2024-07-18 14:20:00',
    updatedAt: '2024-07-18 14:20:00',
    clickCount: 156,
    viewCount: 445
  }
])

// 计算属性
const filteredBanners = computed(() => {
  let result = banners.value

  if (searchForm.title) {
    result = result.filter(b => b.title.includes(searchForm.title))
  }

  if (searchForm.position) {
    result = result.filter(b => b.position === searchForm.position)
  }

  if (searchForm.status) {
    result = result.filter(b => b.status === searchForm.status)
  }

  // 按排序和创建时间排序
  return result.sort((a, b) => {
    if (a.sort !== b.sort) {
      return a.sort - b.sort
    }
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  })
})

// 工具函数
function getPositionTagType(position: string) {
  const typeMap: { [key: string]: string } = {
    app_home_banner: 'primary',
    app_splash: 'success',
    app_category_top: 'warning',
    app_product_interstitial: 'danger',
    app_profile_banner: 'info',
    app_home_help: 'warning',
    app_home_entry: 'success',

    app_home_announcement: 'info'
  }
  return typeMap[position] || ''
}

function getStatusTagType(status: string) {
  const typeMap: { [key: string]: string } = {
    published: 'success',
    draft: 'info',
    offline: 'danger'
  }
  return typeMap[status] || ''
}

// 检查广告位发布数量限制
function checkPositionLimit(position: string, excludeId?: number): { canPublish: boolean; message: string } {
  const limit = positionLimits[position]

  // 无限制的位置（如轮播广告）
  if (limit === -1) {
    return { canPublish: true, message: '' }
  }

  // 统计当前位置已发布的广告数量
  const publishedCount = banners.value.filter(banner =>
    banner.position === position &&
    banner.status === 'published' &&
    banner.id !== excludeId // 排除当前编辑的广告
  ).length

  if (publishedCount >= limit) {
    const positionName = positionMap[position]
    return {
      canPublish: false,
      message: `${positionName}最多只能有${limit}个已发布的广告，请先下线其他广告后再发布`
    }
  }

  return { canPublish: true, message: '' }
}

// 获取广告位当前发布状态信息
function getPositionPublishInfo(position: string): string {
  const limit = positionLimits[position]

  if (limit === -1) {
    const publishedCount = banners.value.filter(banner =>
      banner.position === position && banner.status === 'published'
    ).length
    return `当前已发布：${publishedCount}个`
  }

  const publishedCount = banners.value.filter(banner =>
    banner.position === position && banner.status === 'published'
  ).length

  return `当前已发布：${publishedCount}/${limit}个`
}

// 事件处理函数
function handleSearch() {
  pagination.current = 1
  ElMessage.success('搜索完成')
}

function handleReset() {
  searchForm.title = ''
  searchForm.position = ''
  searchForm.status = ''
  pagination.current = 1
  ElMessage.success('重置完成')
}

function handleSelectionChange(selection: Banner[]) {
  selectedRows.value = selection
}

function handleSizeChange(size: number) {
  pagination.size = size
  pagination.current = 1
}

function handleCurrentChange(current: number) {
  pagination.current = current
}

function handleAdd() {
  isEdit.value = false
  form.value = {
    id: -1,
    title: '',
    image: '',
    link: '',
    position: 'app_home_banner',
    sort: banners.value.length + 1,
    status: 'draft',
    description: '',
    gridRows: 1,
    gridCols: 5
  }
  dialogVisible.value = true
}

function handleEdit(row: Banner) {
  isEdit.value = true
  form.value = { 
    ...row,
    description: row.description || '',
    gridRows: row.gridRows || 1,
    gridCols: row.gridCols || 5
  }
  dialogVisible.value = true
}

function handleDelete(row: Banner) {
  ElMessageBox.confirm(`确定要删除广告【${row.title}】吗？`, '提示', {
    type: 'warning',
  }).then(() => {
    banners.value = banners.value.filter(b => b.id !== row.id)
    ElMessage.success('删除成功')
  })
}

function handleBatchDelete() {
  if (selectedRows.value.length === 0) return

  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个广告吗？`, '提示', {
    type: 'warning',
  }).then(() => {
    const selectedIds = selectedRows.value.map(row => row.id)
    banners.value = banners.value.filter(b => !selectedIds.includes(b.id))
    selectedRows.value = []
    ElMessage.success('批量删除成功')
  })
}

function handlePreview(row: Banner) {
  currentPreview.value = row
  previewType.value = row.position
  currentCarouselIndex.value = 0
  previewVisible.value = true

  // 如果是首页轮播，启动轮播效果
  if (row.position === 'app_home_banner') {
    startCarousel()
  }
}

// 完整APP首页预览
function handleCompletePreview() {
  previewType.value = 'app_home_complete'
  currentCarouselIndex.value = 0
  previewVisible.value = true
  startCarousel()
  
  // 启动公告轮播
  startAnnouncementCarousel()
  
  // 启动启动页倒计时
  startSplashCountdown()
  
  console.log('完整预览打开，启动公告轮播')
}

function handlePublish(row: Banner) {
  // 检查发布数量限制
  const { canPublish, message } = checkPositionLimit(row.position, row.id)

  if (!canPublish) {
    ElMessage.warning(message)
    return
  }

  const positionInfo = getPositionPublishInfo(row.position)

  ElMessageBox.confirm(
    `确定要发布广告【${row.title}】吗？\n\n${positionInfo}`,
    '发布确认',
    {
      type: 'warning',
      dangerouslyUseHTMLString: false
    }
  ).then(() => {
    row.status = 'published'
    row.updatedAt = new Date().toLocaleString()
    ElMessage.success('发布成功')
  })
}

function handleOffline(row: Banner) {
  ElMessageBox.confirm(`确定要下线广告【${row.title}】吗？`, '提示', {
    type: 'warning',
  }).then(() => {
    row.status = 'offline'
    row.updatedAt = new Date().toLocaleString()
    ElMessage.success('下线成功')
  })
}

// 轮播相关
const currentCarouselIndex = ref(0)
const carouselTimer = ref<any>(null)
const isAutoPlaying = ref(false)

// 公告轮播相关
const currentAnnouncementIndex = ref(0)
const announcementTimer = ref<any>(null)

// 启动页倒计时相关
const splashTimer = ref<any>(null)

// 帮助中心导航项
const helpNavItems = [
  { text: '使用说明', sort: 1, icon: '📖' },
  { text: '国际物流', sort: 2, icon: '✈️' },
  { text: '费用构成', sort: 3, icon: '💰' },
  { text: '运费计算器', sort: 4, icon: '🧮' }
]

// 获取首页轮播广告
const homeBanners = computed(() => {
  return banners.value.filter(b => 
    b.position === 'app_home_banner' && b.status === 'published'
  ).sort((a, b) => a.sort - b.sort)
})

// 获取帮助中心广告
const helpCenterAd = computed(() => {
  return banners.value.find(b => 
    b.position === 'app_home_help' && b.status === 'published'
  )
})

// 获取已发布的首页帮助中心广告
const publishedHelpCenterAds = computed(() => {
  return banners.value.filter(banner => 
    banner.position === 'app_home_help' && banner.status === 'published'
  ).sort((a, b) => a.sort - b.sort)
})

// 获取已发布的首页入口配置广告
const publishedHomeEntryAds = computed(() => {
  return banners.value.filter(banner => 
    banner.position === 'app_home_entry' && banner.status === 'published'
  ).sort((a, b) => a.sort - b.sort)
})

// 获取已发布的首页公告位广告
const publishedAnnouncementAds = computed(() => {
  const result = banners.value.filter(banner => 
    banner.position === 'app_home_announcement' && banner.status === 'published'
  ).sort((a, b) => a.sort - b.sort)
  
  console.log('公告位广告数据:', result)
  return result
})

// 获取已发布的启动页广告
const publishedSplashAd = computed(() => {
  return banners.value.find(banner => 
    banner.position === 'app_splash' && banner.status === 'published'
  )
})



// 启动页倒计时函数
function startSplashCountdown() {
  splashCountdown.value = 3
  splashTimer.value = setInterval(() => {
    splashCountdown.value--
    if (splashCountdown.value <= 0) {
      stopSplashCountdown()
      // 倒计时结束后自动切换到首页
      console.log('启动页倒计时结束，自动切换到首页')
    }
  }, 1000)
}

function stopSplashCountdown() {
  if (splashTimer.value) {
    clearInterval(splashTimer.value)
    splashTimer.value = null
  }
}

function skipSplash() {
  splashCountdown.value = 0
  stopSplashCountdown()
}

// 预览相关
function openPreview() {
  if (!form.value.title) {
    ElMessage.warning('请先输入广告标题')
    return
  }
  
  // 公告位不需要图片
  if (form.value.position !== 'app_home_announcement' && !form.value.image) {
    ElMessage.warning('请先上传广告图片')
    return
  }
  
  currentPreview.value = form.value as Banner
  previewType.value = form.value.position
  previewVisible.value = true

  // 如果是首页轮播，启动轮播效果
  if (form.value.position === 'app_home_banner') {
    startCarousel()
  }
  
  // 如果是启动页，启动倒计时
  if (form.value.position === 'app_splash') {
    startSplashCountdown()
  }
  
  // 启动公告轮播
  startAnnouncementCarousel()
  
  // 调试：确保轮播启动
  console.log('预览打开，启动公告轮播')
}

// 实时预览更新
function updatePreview() {
  if (previewVisible.value && currentPreview.value) {
    // 更新当前预览的数据
    Object.assign(currentPreview.value, form.value)
  }
}

// 从图片URL中提取图标
function getIconFromImage(imageUrl: string): string {
  // 如果URL包含text参数，提取其中的emoji或文字
  const textMatch = imageUrl.match(/text=([^&]+)/)
  if (textMatch) {
    return decodeURIComponent(textMatch[1])
  }
  
  // 如果是真实上传的图片（base64或http/https），返回默认图标
  if (imageUrl && (imageUrl.startsWith('data:') || imageUrl.startsWith('http'))) {
    return '📖'
  }
  
  // 如果没有图片，返回默认图标
  return '📖'
}

// 获取网格配置
function getGridConfig() {
  // 使用统一的网格配置，所有首页入口配置广告都使用相同的配置
  // 这里可以根据需要设置默认的网格配置
  const defaultConfig = {
    rows: 1,
    cols: 5
  }
  
  // 如果有已发布的首页入口配置广告，检查是否所有广告都使用相同的配置
  if (publishedHomeEntryAds.value.length > 0) {
    const firstAd = publishedHomeEntryAds.value[0]
    const config = {
      rows: firstAd.gridRows || defaultConfig.rows,
      cols: firstAd.gridCols || defaultConfig.cols
    }
    
    // 检查所有广告是否都使用相同的配置
    const allSameConfig = publishedHomeEntryAds.value.every(ad => 
      ad.gridRows === config.rows && ad.gridCols === config.cols
    )
    
    if (allSameConfig) {
      return config
    } else {
      // 如果配置不一致，使用默认配置并显示警告
      console.warn('首页入口配置广告的网格配置不一致，使用默认配置')
      return defaultConfig
    }
  }
  
  return defaultConfig
}

// 获取网格配置提示
function getGridConfigHint() {
  const existingAds = banners.value.filter(b => 
    b.position === 'app_home_entry' && b.status === 'published'
  )
  
  if (existingAds.length > 0) {
    const firstAd = existingAds[0]
    return `提示：已发布的首页入口配置广告使用 ${firstAd.gridRows}行${firstAd.gridCols}列，请使用相同的网格配置以保持布局一致`
  }
  
  return null
}

// 切换自动播放状态
function toggleAutoPlay() {
  if (isAutoPlaying.value) {
    stopCarousel()
  } else {
    startCarousel()
  }
}

// 获取同位置的所有广告（用于轮播）
const carouselBanners = computed(() => {
  if (previewType.value === 'app_home_banner') {
    // 获取所有首页轮播的已发布广告
    const homeBanners = banners.value.filter(b =>
      b.position === 'app_home_banner' && b.status === 'published'
    ).sort((a, b) => a.sort - b.sort)

    // 如果当前预览的是新建/编辑的广告，也加入轮播
    if (currentPreview.value && currentPreview.value.position === 'app_home_banner') {
      const existingIndex = homeBanners.findIndex(b => b.id === currentPreview.value.id)
      if (existingIndex === -1) {
        // 新建的广告，添加到轮播中
        homeBanners.push(currentPreview.value)
      } else {
        // 编辑的广告，替换原有的
        homeBanners[existingIndex] = currentPreview.value
      }
    }

    return homeBanners.length > 0 ? homeBanners : [currentPreview.value]
  }
  return [currentPreview.value]
})

// 轮播控制函数
function startCarousel() {
  stopCarousel()
  if (carouselBanners.value.length > 1) {
    isAutoPlaying.value = true
    carouselTimer.value = setInterval(() => {
      currentCarouselIndex.value = (currentCarouselIndex.value + 1) % carouselBanners.value.length
    }, 3000) // 每3秒切换一次
  }
}

// 获取公告轮播的transform值（实现循环轮播）
function getAnnouncementTransform(index: number): number {
  const total = publishedAnnouncementAds.value.length
  if (total === 0) return 0
  
  let targetIndex = index - currentAnnouncementIndex.value
  
  // 处理循环：当从最后一个切换到第一个时，让第一个显示在下方
  if (targetIndex < 0) {
    targetIndex += total
  }
  
  return targetIndex * 20
}

// 公告轮播控制函数
function startAnnouncementCarousel() {
  stopAnnouncementCarousel()
  // 重置索引
  currentAnnouncementIndex.value = 0
  
  console.log('启动公告轮播，公告数量:', publishedAnnouncementAds.value.length)
  
  // 只要有公告就启动轮播，即使只有一个
  if (publishedAnnouncementAds.value.length > 0) {
    console.log('设置轮播定时器')
    announcementTimer.value = setInterval(() => {
      currentAnnouncementIndex.value = (currentAnnouncementIndex.value + 1) % publishedAnnouncementAds.value.length
      console.log('轮播索引更新:', currentAnnouncementIndex.value)
    }, 2000) // 每2秒切换一次
  }
}

function stopAnnouncementCarousel() {
  if (announcementTimer.value) {
    clearInterval(announcementTimer.value)
    announcementTimer.value = null
  }
}

function stopCarousel() {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
    carouselTimer.value = null
  }
  isAutoPlaying.value = false
}

function goToSlide(index: number) {
  currentCarouselIndex.value = index
  // 手动切换时暂停自动播放
  if (isAutoPlaying.value) {
    stopCarousel()
  }
}

function closePreview() {
  stopCarousel()
  stopAnnouncementCarousel()
  stopSplashCountdown()
  currentCarouselIndex.value = 0
  currentAnnouncementIndex.value = 0
  splashCountdown.value = 3
  previewVisible.value = false
}

// 图片上传
function beforeImageUpload(file: File) {
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp']
  const isValidType = allowedTypes.includes(file.type)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isValidType) {
    ElMessage.error('上传图片只能是 JPG/PNG/WebP 格式!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
    return false
  }

  // 给出文件大小提示
  const fileSizeMB = (file.size / 1024 / 1024).toFixed(2)
  ElMessage.info(`图片大小：${fileSizeMB}MB`)

  return true
}

function uploadImage(options: any) {
  const file = options.file
  const reader = new FileReader()
  reader.onload = (e) => {
    form.value.image = e.target?.result as string
    ElMessage.success('图片上传成功')
    // 如果预览窗口打开，立即更新预览
    if (previewVisible.value) {
      updatePreview()
    }
  }
  reader.readAsDataURL(file)
}

function handleImageSuccess() {
  // 图片上传成功回调
}

function handleSaveDraft() {
  form.value.status = 'draft'
  handleSubmit()
}

function handlePositionChange() {
  // 位置变更时，可以在这里添加额外的逻辑
  // 比如根据位置调整默认排序值等
}

function handleSubmit() {
  if (!form.value.title) {
    ElMessage.warning('请输入广告标题')
    return
  }
  if (!form.value.image) {
    ElMessage.warning('请上传广告图片')
    return
  }

  // 如果是首页入口配置位置，检查网格配置一致性
  if (form.value.position === 'app_home_entry') {
    const existingAds = banners.value.filter(b => 
      b.position === 'app_home_entry' && b.status === 'published' && b.id !== form.value.id
    )
    
    if (existingAds.length > 0) {
      const firstAd = existingAds[0]
      if (firstAd.gridRows !== form.value.gridRows || firstAd.gridCols !== form.value.gridCols) {
        ElMessage.warning(`网格配置不一致！已发布的广告使用 ${firstAd.gridRows}行${firstAd.gridCols}列，请使用相同的配置`)
        return
      }
    }
  }

  // 如果要发布，检查数量限制
  if (form.value.status === 'published') {
    const { canPublish, message } = checkPositionLimit(
      form.value.position,
      isEdit.value ? form.value.id : undefined
    )

    if (!canPublish) {
      ElMessage.warning(message)
      return
    }
  }

  const now = new Date().toLocaleString()

  if (isEdit.value) {
    const index = banners.value.findIndex(b => b.id === form.value.id)
    if (index !== -1) {
      banners.value[index] = {
        ...form.value,
        updatedAt: now
      } as Banner
    }
    ElMessage.success('更新成功')
  } else {
    const newBanner: Banner = {
      ...form.value,
      id: Date.now(),
      createdAt: now,
      updatedAt: now
    } as Banner
    banners.value.push(newBanner)
    ElMessage.success('创建成功')
  }

  dialogVisible.value = false
}

</script>

<style scoped>
/* .banner-management {
  padding: 20px;
} */

.banner-management-card :deep(.el-card__body) {
  padding: 20px;
}

/* 页面头部样式 */
.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.page-desc {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0;
}

/* 搜索表单样式 */
.search-form {
  margin-top: 20px;
}

/* 主要内容样式 */
.main-content {
  min-height: 600px;
}

/* 确保卡片对齐 - 修改主内容卡片的默认内边距为 0 */
.main-content :deep(.el-card__body) {
  padding: 0;
}

/* 搜索卡片保持默认内边距 */
.page-header :deep(.el-card__body) {
  padding: 20px;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 0;
}

.toolbar-left {
  display: flex;
  gap: 12px;
}

.toolbar-right {
  color: #7f8c8d;
  font-size: 14px;
}

.selected-info {
  color: #409eff;
}

/* 表格样式 */
.table-container {
  margin-bottom: 20px;
  /* 不要再加 padding */
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid #e4e7ed;
  margin-top: 20px;
}

/* 图片上传样式 */
.image-upload-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #409eff;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  display: block;
}

.uploaded-image {
  width: 200px;
  height: 120px;
  object-fit: cover;
  display: block;
}

.upload-tips {
  color: #7f8c8d;
  font-size: 12px;
}

.upload-tips p {
  margin: 0;
}

/* 位置信息样式 */
.position-info {
  margin-top: 4px;
  padding: 4px 8px;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  border-radius: 4px;
  font-size: 12px;
}

/* 手机APP预览样式 */
.mobile-preview-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #f0f2f5;
  border-radius: 8px;
}

.mobile-frame {
  width: 375px;
  height: 667px;
  background: #000;
  border-radius: 25px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}

.mobile-frame::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.mobile-status-bar {
  height: 44px;
  background: #000;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
}

.status-icons {
  display: flex;
  gap: 5px;
  font-size: 12px;
}

.mobile-content {
  height: calc(100% - 44px);
  background: white;
  border-radius: 0 0 17px 17px;
  overflow: hidden;
  position: relative;
}

/* APP页面预览样式 */
.app-header {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e9ecef;
  font-size: 16px;
  font-weight: 600;
}

.back-btn {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
}

.app-search {
  font-size: 18px;
  color: #666;
}

.settings-btn {
  font-size: 16px;
}

/* APP首页预览 */
.app-home-preview {
  height: 100%;
  overflow-y: auto;
}

.home-banner {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 20px 12px 12px;
}

.banner-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.banner-desc {
  font-size: 11px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.3;
}

.banner-indicators {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  background: rgba(255,255,255,0.8);
}

.dot.active {
  background: white;
  transform: scale(1.2);
}

.carousel-info {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  z-index: 10;
}

.home-content {
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.product-item {
  height: 80px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

/* APP启动页预览 */
.app-splash-preview {
  height: 100%;
  position: relative;
}

.splash-content {
  height: 100%;
  position: relative;
}

.splash-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(0,0,0,0.3);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
}

.status-icons {
  display: flex;
  gap: 5px;
  font-size: 12px;
}

.splash-skip {
  position: absolute;
  top: 60px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.splash-skip:hover {
  background: rgba(0,0,0,0.8);
}

.skip-text {
  font-weight: 500;
}

.skip-countdown {
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

.splash-brand {
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

.brand-logo {
  font-size: 48px;
  margin-bottom: 12px;
}

.brand-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.brand-slogan {
  font-size: 14px;
  opacity: 0.9;
}

.splash-loading {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.loading-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: loading-dot 1.4s infinite ease-in-out;
}

.loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-text {
  font-size: 12px;
  opacity: 0.8;
}

/* 分类页预览 */
.app-category-preview {
  height: 100%;
  overflow-y: auto;
}

.category-banner {
  height: 80px;
  overflow: hidden;
}

.category-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-content {
  padding: 16px;
}

.category-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 12px;
}

.tab {
  padding: 8px 16px;
  border-radius: 20px;
  background: #f8f9fa;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.tab.active {
  background: #409eff;
  color: white;
}

.category-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.category-item {
  height: 60px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

/* 插屏广告预览 */
.app-interstitial-preview {
  height: 100%;
  position: relative;
}

.background-content {
  height: 100%;
  background: #f8f9fa;
  filter: blur(2px);
}

.product-list {
  padding: 16px;
}

.list-item {
  height: 60px;
  background: white;
  margin-bottom: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #666;
}

.interstitial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.interstitial-modal {
  position: relative;
  max-width: 280px;
  max-height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.interstitial-modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

/* 个人中心预览 */
.app-profile-preview {
  height: 100%;
  overflow-y: auto;
}

.profile-info {
  padding: 20px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
}

.profile-banner {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.profile-banner img {
  width: 100%;
  height: 60px;
  object-fit: cover;
}

.profile-menu {
  padding: 16px;
}

.menu-item {
  height: 50px;
  background: white;
  margin-bottom: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #2c3e50;
  font-size: 14px;
  border: 1px solid #e9ecef;
}

/* 完整APP首页预览 */
.app-home-complete-preview {
  height: 100%;
  overflow-y: auto;
  background: #f5f5f5;
}

.app-home-complete-preview .app-header {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e9ecef;
  font-size: 16px;
  font-weight: 600;
}

.app-home-complete-preview .home-banner {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.app-home-complete-preview .carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.app-home-complete-preview .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.app-home-complete-preview .carousel-slide.active {
  opacity: 1;
}

.app-home-complete-preview .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-home-complete-preview .banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 20px 12px 12px;
}

.app-home-complete-preview .banner-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.app-home-complete-preview .banner-desc {
  font-size: 11px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.3;
}

.app-home-complete-preview .banner-indicators {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.app-home-complete-preview .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.app-home-complete-preview .dot:hover {
  background: rgba(255,255,255,0.8);
}

.app-home-complete-preview .dot.active {
  background: white;
  transform: scale(1.2);
}

.app-home-complete-preview .carousel-info {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  z-index: 10;
}

.app-home-complete-preview .home-content {
  padding: 16px;
}

.app-home-complete-preview .section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.app-home-complete-preview .product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app-home-complete-preview .product-item {
  height: 80px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

/* 完整预览中的启动页样式 */
.splash-section {
  position: relative;
  height: 100%;
  width: 100%;
}

.splash-section .splash-content {
  height: 100%;
  position: relative;
}

.splash-section .splash-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-section .splash-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(0,0,0,0.3);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
}

.splash-section .splash-skip {
  position: absolute;
  top: 60px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.splash-section .splash-skip:hover {
  background: rgba(0,0,0,0.8);
}

.splash-section .splash-brand {
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

.splash-section .splash-loading {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

/* APP首页内容样式 */
.app-home-content {
  height: 100%;
  overflow-y: auto;
  background: #f5f5f5;
}



/* 首页帮助中心预览 */
.app-home-help-preview {
  height: 100%;
  overflow-y: auto;
  background: #f5f5f5;
}

.help-nav-bar {
  display: flex;
  background: white;
  padding: 4px 16px;
  border-bottom: 1px solid #e0e0e0;
  height: 30px;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  font-size: 9px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
}

.nav-link:hover {
  background-color: #f5f5f5;
}

.nav-link.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.nav-icon {
  font-size: 10px;
  flex-shrink: 0;
}

.nav-text {
  font-weight: 500;
  flex: 1;
  font-size: 9px;
  overflow: visible;
  white-space: nowrap;
}

.nav-arrow {
  color: #999;
  font-size: 6px;
  flex-shrink: 0;
}

.announcement-bar {
  background: white;
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}

.announcement-carousel {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
}

.announcement-text-container {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.announcement-text {
  font-size: 12px;
  color: #666;
  transition: opacity 0.5s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-icons {
  display: grid;
  background: white;
  padding: 16px;
  gap: 8px;
  min-height: 80px;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  justify-content: center;
  min-height: 60px;
}

.icon-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.icon-text {
  font-size: 10px;
  color: #666;
  text-align: center;
}

/* 对话框样式 */
.dialog-footer {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding-top: 8px;
}

/* 表格中的图片显示样式 */
.banner-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-placeholder {
  width: 80px;
  height: 45px;
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
}

.placeholder-text {
  font-size: 12px;
  color: #666;
  font-weight: bold;
}




</style>